<template>
    <div class="mainContent">
        <div class="content">
            <ul class="deviceList">
                <li :class="{'actived': item.id===deviceMsg.id}" v-for="item in deviceList" :key="item.id" @click="changeDevice(item)">{{item.name}}</li>
            </ul>
            <div class="deviceContent">
                <div class="search">
                    <span>日期选择：</span>
                    <el-date-picker
                        type="date"
                        v-model="datePicker"
                        :picker-options="options"
                        @change="dateChange"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期">
                    </el-date-picker>
                    <input type="text" class="hiddenInput" />
                </div>
                <div class="tableBox">
                    <el-table :data="washRecord">
                        <el-table-column prop="createTime" label="冲洗时间"></el-table-column>
                        <el-table-column prop="startDelay" label="启动延迟(s)"></el-table-column>
                        <el-table-column prop="carWashingTime" label="冲洗时长(s)"></el-table-column>
                        <el-table-column prop="singleWaterVolume" label="耗水量(L)"></el-table-column>
                        <el-table-column prop="waterPumpCount" label="累计洗车次数"></el-table-column>
                        <el-table-column prop="cumulativeWaterVolume" label="累计耗水量(L)"></el-table-column>
                    </el-table>
                    <div class="clearfix" v-show="washRecord.length>0">
                        <div class="float-right">
                            <Page
                                v-if="total>0"
                                style="margin-top: 20px;text-align: center;"
                                :current.sync="pageNum"
                                :total="total"
                                :page-size="pageSize"
                                show-elevator
                                show-total
                                @on-change="pageChange">
                            </Page>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { format } from "@/sever/utils.js";
import { getWashMachList, getWashRecord } from "@/api/car.js";

export default {
    name: 'ammeterData',
    data() {
        return {
            options: {
                disabledDate(date) {
                    return date > Date.now();
                }
            },
            datePicker: format(new Date(), "YYYY-MM-DD"),

            deviceType: 23,
            deptId: "",

            deviceList: [], // 设备列表
            deviceMsg: '', // 当前选中设备信息
            washRecord: [], // 冲洗记录
            pageNum: 1,
            pageSize: 10,
            total: 0
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        },
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.getDeviceList();
            }
        },
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId
        this.getDeviceList()
    },
    methods:{
        /* 设备切换 */
        changeDevice(val){
            this.pageNum = 1
            this.deviceMsg = val
            this.getDeviceRecord()
        },

        /* 日期选择 */
        dateChange(val){
            this.pageNum = 1
            this.datePicker = val
            this.getDeviceRecord()
        },

        /* 设备列表 */
        getDeviceList(){
            let param = {
                deptId: this.deptId,
                type: this.deviceType
            }
            getWashMachList(param).then(res=>{
                if(res.code == 200){
                    if(res.data.length>0){
                        this.deviceList = res.data
                        this.deviceMsg = res.data[0]
                        this.getDeviceRecord()
                    }
                }else{
                    this.$Message.warning(res.msg)
                }
            })
        },

        /* 冲洗记录 */
        getDeviceRecord(){
            let param = {
                deviceId: this.deviceMsg.id,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                startTime: this.datePicker + " 00:00:00",
                endTime: this.datePicker + " 23:59:59"
            }
            getWashRecord(param).then(res=>{
                if(res.code == 200){
                    this.washRecord = res.data.list
                    this.total = res.data.total
                }
            })
        },

         /* 翻页 */
         pageChange(index) {
            this.pageNum = index;
            this.getDeviceRecord();
        },
    }
}
</script>
<style scoped lang='less'>

@import "./../../assets/style/themeBase.less";

.mainContent {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #f5f5f5;
    .content {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        overflow: hidden;
        .deviceList{
            width: 240px;
            padding: 10px 20px;
            box-sizing: border-box;
            border-radius: 5px;
            background-color: #fff;
            list-style: none;
            li{
                cursor: pointer;
                padding: 5px;
                font-size: 14px;
                color: #606266;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .actived{
                color: var(--themeColor);
            }
        }
        .deviceContent{
            margin-left: 10px;
            flex: 1;
            overflow: hidden;
            .search{
                margin-bottom: 10px;
                padding: 15px 20px;
                border-radius: 4px;
                background-color: #fff;
            }
            .tableBox{
                padding: 20px;
                border-radius: 4px;
                background-color: #fff;
            }
        }
    }

    .hiddenInput{
        opacity:0;
        position: absolute;
        top:-9999px;
        width:0;
    }
}
</style>
